<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表展示</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
    <div id="app">
        <el-row>
            <el-col :span="5"><el-input v-model="title" size="mini" placeholder="请输入新闻标题"></el-input></el-col>
            <el-col :span="5"><el-input v-model="clicknum" size="mini" placeholder="请输入点击量"></el-input></el-col>
            <el-col :span="4"><el-input v-model="newstid" size="mini" placeholder="请输入新闻类型"></el-input></el-col>
            <el-col :span="5"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="5"><el-button type="primary" size="mini" @click="toEdit()" icon="el-icon-circle-plus">添加</el-button></el-col>
        </el-row>
        <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="newsid"
                            label="新闻ID"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="newstid"
                            label="新闻类型ID"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="新闻标题">
                    </el-table-column>
                    <el-table-column
                            prop="user_name"
                            label="编辑者">
                    </el-table-column>
                    <el-table-column
                            prop="stick"
                            label="置顶"
                            width="100">
                        <template scope="scope">
                            <p v-if="scope.row.stick==1">是</p>
                            <p v-if="scope.row.stick==0">否</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="thick"
                            label="加粗"
                            width="100">
                        <template scope="scope">
                            <p v-if="scope.row.thick==1">是</p>
                            <p v-if="scope.row.thick==0">否</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="redsign"
                            label="标红"
                            width="100">
                        <template scope="scope">
                            <p v-if="scope.row.redsign==1">是</p>
                            <p v-if="scope.row.redsign==0">否</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="最后修改时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="新闻图片"
                            width="180">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.imagepath"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="toEdit(scope.row.newsid)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>



        <el-row>
            <!--编辑模态框-->
            <el-dialog title="编辑" :visible.sync="editFormVisible">
                <el-form :model="form">
                    <el-form-item v-if='show' label="新闻id" :label-width="formLabelWidth">
                        <el-input v-model="form.newsid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻类型" :label-width="formLabelWidth">
                        <template>
                            <el-select v-model="form.newstid" placeholder="请选择">
                                <el-option
                                        v-for="item in newstypes"
                                        :key="item.newstid"
                                        :label="item.newstype"
                                        :value="item.newstid">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="新闻简介" :label-width="formLabelWidth">
                        <el-input v-model="form.intro" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻内容" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.mainbody">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="是否加粗" :label-width="formLabelWidth">
                        <el-select v-model="form.stick" placeholder="请选择">
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否加厚" :label-width="formLabelWidth">
                        <el-select v-model="form.thick" placeholder="请选择">
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否标红" :label-width="formLabelWidth">
                        <el-select v-model="form.redsign" placeholder="请选择">
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图片名字" :label-width="formLabelWidth">
                        <el-input v-model="form.imagename" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻图片" :label-width="formLabelWidth">
                        <!--:auto-upload="true"自动上传-->
                        <el-upload
                                class="avatar-uploader"
                                action="/commonOSS/upload"
                                name="file"
                                :auto-upload="true"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button v-if="form.newsid==null" type="primary" @click="add()">添 加</el-button>
                    <el-button v-else type="primary" @click="update()">更 新</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
    <script>
         var vue = new Vue({
             el:"#app",
             data:{//数据
                 tableData:[],
                 currentPage:1,
                 pageSize:5,
                 total:20,
                 title:null,
                 clicknum:null,
                 newstid:null,
                 editFormVisible:false,//更新对话框是否显示
                 form:{},//添加或者更新form
                 formLabelWidth:"120px",
                 newstypes:[],
                 imageUrl: ''//图片路径

             },
             created:function () {
                this.loadData();
             },
             methods:{//方法
                 //加载数据的方法
                 loadData:function () {
                     _this =this;
                     //初始化数据
                     axios.get('/news/page', {
                         params: {
                             pageNo:this.currentPage,
                             pageSize:this.pageSize,
                             title:this.title,
                             clicknum:this.clicknum,
                             newstid:this.newstid
                         }
                     }).then(function (response) {
                         // handle success  处理成功，回调的方法
                         //console.log(response);
                         //赋值分页列表
                         _this.tableData = response.data.page;
                         //删除最后一页为空时，调到上一页
                         //alert(_this.tableData.length);
                         if(_this.tableData.length==0&&_this.currentPage!=1){
                             _this.currentPage=_this.currentPage-1;
                             _this.loadData();
                         }
                         //赋值总条数
                         _this.total = response.data.total;
                     })
                     .catch(function (error) {
                         // handle error 处理异常
                         //console.log(error);
                     })
                     .then(function () {
                         // always executed  总是执行  相当于finally
                     });
                 },
                 //每页数量发生变化时
                 handleSizeChange:function (v) {
                     this.pageSize=v;
                    this.loadData();
                 },
                 //当前页数放生变化是
                 handleCurrentChange:function (v) {
                    this.currentPage=v;
                    this.loadData();
                 },
                 // 搜索方法
                 search:function () {
                     this.currentPage=1;
                     this.loadData();
                 },
                 //打开编辑更新模态框
                 toEdit:function (newsid) {
                     this.form={};
                     this.imageUrl='';
                     this.newstypes=[];
                     //请求到新闻类型
                     axios.post('/news/newstypeList').then(function (response) {
                         _this.newstypes = response.data.list;
                     })
                     if (newsid>0){
                         //请求当前行newsid的数据
                         axios.post('/news/newsOne?newsid='+newsid).then(function (response) {
                             _this.form = response.data.list;
                             if (response.data.path!="201"){
                                 _this.imageUrl = response.data.path;
                             }
                         })
                     }
                     this.editFormVisible=true;
                 },
                 //删除
                 handleDelete:function (index,row) {
                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
                         axios.post('/news/delete?newsid='+row.newsid).then(function (response) {
                             if(response.data.code == 200){
                                 //提示成功
                                 _this.$message({
                                     type: 'success',
                                     message: response.data.info
                                 });
                                 //重新加载数据
                                 _this.loadData();
                             }
                         }).catch(function (error) {
                             _this.$message.error("删除失败");
                         });
                     }).catch(() => {
                         this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });
                     });
                 },
                 //添加
                 add:function(){
                     axios.post('/news/add',this.form).then(function (response) {
                         if(response.data.code == 200){
                             //提示成功
                             _this.$message({
                                 message: '恭喜你，添加成功',
                                 type: 'success'
                             });
                             //关闭弹出框
                             _this.editFormVisible=false;
                             //重新加载数据
                             _this.loadData();
                         }
                     }).catch(function (error) {
                         _this.$message.error("添加失败");
                     });
                 },
                 //成功上传处理
                 handleAvatarSuccess(res, file) {
                     this.imageUrl = URL.createObjectURL(file.raw);
                     //alert(file.response);
                     //alert(JSON.stringify(file.response));
                     this.imageUrl=file.response.ossFileUrlBoot;
                     this.form.imagepath=file.response.ossFileUrlBoot;
                     // this.form.fileName=file.response.oldFileName;
                     // this.form.filePath=file.response.newFilePath;
                 },
                 //上传前的处理（判断图片大小）
                 beforeAvatarUpload(file) {
                     // const isJPG = file.type === 'image/jpeg';
                     const isLt2M = file.size / 1024 / 1024 < 2;
                     /*  if (!isJPG) {
                           this.$message.error('上传头像图片只能是 JPG 格式!');
                       }*/
                     if (!isLt2M) {
                         this.$message.error('上传头像图片大小不能超过 2MB!');
                     }
                     return isLt2M;
                 },
                 //更新
                 update:function(){
                     //JSON.stringify JSON 转 String？？？
                     alert(JSON.stringify(this.form));
                     axios.post('/news/update',this.form).then(function (response) {
                         if(response.data.code == 200){
                             //提示成功
                             _this.$message({
                                 message: '恭喜你，更新成功',
                                 type: 'success'
                             });
                             //关闭弹出框
                             _this.editFormVisible=false;
                             //重新加载数据
                             _this.loadData();
                         }
                     }).catch(function (error) {
                         _this.$message.error("更新失败");
                     });
                 }
             }
         });
    </script>
</body>
</html>